<template>
	<view>
		<cu-custom v-if="customShow" bgColor="bg-fafafa" :isBack="true">
			<block slot="backText"></block>
			<block slot="content">{{title}}</block>
		</cu-custom>
		<scroll-view class="scrollPage" scroll-y="true" :style="'height:'+(winHeight-barHeight)+'px'" style="background: #fafafa;">
			<indicator-view :indicatorType="indicatorType" :message="indicatorMsg" :zindex="999" :animationClass="animation"></indicator-view>
			<view class="detail" v-if="article">
				<!-- <view class="padding text-bold text-lg text-center">{{article.subtitle}}</view> -->
				<!-- <view class="text-right text-gray padding-right">{{article.add_time}}</view> -->
				<view class="padding-sm">
					<rich-text :nodes="article.content">
					</rich-text> 
				</view>
				<view class="cu-tabbar-height"></view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	let disp = require("common/broadcast");
	import {mapState,mapMutations} from 'vuex';
	import articleObj from 'model/articleModel.js';
	import parseHtml from 'common/html-parser.js';
	let me = null;
	export default {
		data() {
			return {
				indicatorType: 5,
				indicatorMsg:'正在加载',
				
				animation:'',
				customShow:0,
				barHeight:0,
				
				title:'',
				article_id:0,
				article:null
			};
		},
		onLoad(option) {
			me = this;
			this.barHeight = this.NativeBar;
			//#ifdef H5 || MP-BAIDU || MP-TOUTIAO || MP-WEIXIN
			this.customShow = 1;
			this.barHeight = this.CustomBar;
			//#endif
			if (option.article_id) {
				this.article_id = option.article_id;
				this.read = option.read;
				me.getDetail();
			
			} else {
				//参数错误
				uni.showModal({
					title: '系统提示',
					content: '参数错误',
					showCancel: false,
					success: function(res) {
						uni.navigateBack({
							delta: 1
						})
					}
				})
			}
		},
		computed: {
			...mapState({
				winHeight: ({
					baseModule
				}) => baseModule.winHeight,
				hasLogin: ({
					userModule
				}) => userModule.hasLogin,
				userInfo: ({
					userModule
				}) => userModule.userInfo,
			})
		},
		methods:{
			getDetail(){
				articleObj.articleDetail(me,{article_id:me.article_id}).then(res => {
					this.article = res;
					this.title = this.article.title;
					//#ifndef H5
						uni.setNavigationBarTitle({title:this.title});
					//#endif
					this.article.add_time = me.$util.transferDate(this.article.add_time*1000);
					this.article.content = parseHtml.parseHtml('<div class="content">'+this.convert(this.article.content)+'</div>');
					me.$util.closeIndicator(me);
				}).catch(err => {
					uni.showModal({
						title: '错误',
						content: '内容不存在',
						showCancel: false,
						success: function(res) {
							uni.navigateBack({
								delta: 1
							})
						}
					})
				});
			},
			convert(html) {
			var newContent= html.replace(/<img[^>]*>/ig,function(match,capture){
					var match = match.replace(/(style="(.*?)")|(width="(.*?)")|(height="(.*?)")/ig, '').replace(/(<img)/ig, '<img width="100%"');
					return match;
				});
			return newContent;
			}
		}
	}
</script>

<style>
.detail .content{
	line-height: 2;
	padding:0;
	margin:0;
}
.detail .content p,
.detail .content div{
	padding:0;
	margin:0;
}
.detail .content img{
	width:100%;
	padding:0;
	margin:0;
}
</style>
